<template>
    <div class="container">

        <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :pageSize="page.size"
                      :page-change="changePage" :editFunc="handleEdit">
            <template #toolbarBtn>
                <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
            </template>
        </TableCustom>

        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
                   :close-on-click-modal="false" @close="closeDialog">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="120px" label-position="top">
            <el-row :gutter="50">
                <el-col :span="10">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item v-if="form.type === '项目'" label="展会" prop="exhibition">
                        <el-input v-model="form.exhibition" placeholder="展会"></el-input>
                    </el-form-item>
                    <el-form-item v-if="form.type === '项目'" label="展会地址" prop="address">
                        <el-input v-model="form.address" placeholder="展会地址"/>
                    </el-form-item>
                    <el-form-item v-if="form.type === '项目'" label="面积" prop="size">
                        <el-input v-model="form.size" placeholder="面积"/>
                    </el-form-item>
                    <el-form-item v-if="form.type === '链接'" label="链接" prop="link">
                        <el-input v-model="form.link" placeholder="链接"/>
                    </el-form-item>

                    <el-form-item v-if="form.type !== '链接'" label="时间" prop="time">
                        <!--<base-date :model-value="project.time" @update:modelValue="$emit('update:modelValue', $event)" />-->
                        <el-time-picker placeholder="选择时间" v-model="form.time">
                        </el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="类型" prop="type">
                        <el-radio-group v-model="form.type">
                            <el-radio label="项目" value="项目"></el-radio>
                            <el-radio label="新闻" value="新闻"></el-radio>
                            <el-radio label="链接" value="链接"></el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="分类" prop="category">
                        <el-tree-select
                                v-model="form.category"
                                :data="category"
                                :render-after-expand="false"
                                style="width: 240px"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
                        <el-button @click="onReset(formRef)">重置表单</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="forms">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormProps, FormRules } from 'element-plus';
const labelPosition = ref<FormProps['labelPosition']>('right')
import { tree, save, list} from '@/api/project'
import {User} from "@/types/user";

// 表格相关
let columns = ref([
    { type: 'index', label: '序号', width: 55, align: 'center' },
    { prop: 'name', label: '名称' },
    { prop: 'type', label: '类型' },
    { prop: 'exhibition', label: '展会' },
    { prop: 'link', label: '链接' },
    { prop: 'time', label: '时间' },
    { prop: 'operator', label: '操作', width: 250 },
])
const page = reactive({
    index: 1,
    size: 20,
    total: 0,
})
const tableData = ref([]);
//项目列表
const fetchData = () => {
    list({}).then(({data}) => {
        tableData.value = data.info.list;
        page.total = data.info.list.length;
    })
}

fetchData()

const changePage = (val: number) => {
    page.index = val;
    fetchData()
};

//弹窗
const visible = ref(false);
const isEdit = ref(false);
const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};
/**
 * 添加项目相关
 */
const category = ref([]);
tree().then(({ data }) => {
    category.value = data.info;
})
const rules: FormRules = {
    name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
    exhibition: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
    address: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
};
const formRef = ref<FormInstance>();
const form = reactive({
    name: '',
    exhibition: '',
    address: '',
    size: '',
    link: '',
    type: '项目',
    time: ''
});
const generateData = () => {
    const data = []
    for (let i = 1; i <= 15; i++) {
        data.push({
            key: i,
            label: `Option ${i}`,
            disabled: i % 4 === 0,
        })
    }
    return data
}
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
    // 表单校验
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log(form);
            save(form).then(({data}) => {
               if (data.success) {
                   ElMessage.success('提交成功！');
               } else {
                   ElMessage.error(data.info)
               }
            })
        } else {
            return false;
        }
    });
};
// 重置
const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

/**
 * 添加项目相关
 */
</script>
